<template>
  <s-layout title="店铺列表" :bgStyle="{ color: '#FFF' }">
    <view v-if="state.list.length" class="list">
		<view class="item"
		v-for="item in state.list" 
		:key="item.id">
		
			<view class="shop-name">{{item.name}}</view>
			<view class="btn"  
			@tap="sheep.$router.go('/pages/user/shop/turnover?id='+item.id)">
				查看营业额
			</view>
		</view>
    </view>

    <s-empty
      v-if="state.list.length === 0 && !state.loading"
      text="暂无店铺"
      icon="/static/data-empty.png"
    />
  </s-layout>
  
</template>

<script setup>
  import { reactive, onBeforeMount } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { isEmpty } from 'lodash';

  const state = reactive({
    list: [],
    loading: true,
  });

  onShow(async () => {
    state.list = (await sheep.$api.user.shopList()).data;
    state.loading = false;
  });

  onBeforeMount(() => {
    
  });
</script>


<style lang="scss" scoped>
.list{
	min-height: 100vh;
	background: #f1f1f1 !important;
	padding-top: 30rpx;
}	

.item{
	background-color: white;
	height: 120rpx;
	margin: 0rpx 30rpx 30rpx 30rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	padding: 0rpx 20rpx;
	justify-content: space-between;
	
	.shop-name{
		font-size: 28rpx;
		font-weight: 700;
	}
	
	.btn{
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		color:white;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		width: 160rpx;
		flex-shrink: 0;
	}
}
</style>
